<template>
  <tui-modal class="modelTui" :show="showModal" :title="modalTitle" :input="true" :custom="true" content="" >
    <view class="elegant-modal">
      <!-- 标题区域 -->
      <view class="modal-header">
        <text class="header-title">{{ modalTitle }}</text>
      </view>

      <!-- 内容区域 -->
      <view class="modal-body" v-if="Doyouwanttoinput">
        <up-textarea class="elegant-textarea" :placeholder="modalPlaceholder" border="none" v-model="value" count auto-height @change="upTextValue"></up-textarea>
        <view v-if="required" style="font-size: 12px;color: red">请输入拒绝的具体原因</view>
      </view>

      <!-- 操作按钮 -->
      <view class="modal-footer">
        <view class="footer-btn cancel" @click="handleModalCancel">
          <text>取消</text>
        </view>
        <view class="footer-divider"></view>
        <view class="footer-btn confirm" @click="handleModalConfirm">
          <text>确定</text>
        </view>
      </view>
    </view>
  </tui-modal>
</template>


<script>
import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue"
export default {
  name: "modalindex",
  props: {
    modalTitle:{
      type:String,
      default: '提示'
    },
    modalPlaceholder:{
      type:String,
      default: '请输入内容'
    },
    Doyouwanttoinput:{
      type:Boolean,
      default: false
    }
  },
  components: {
    tuiModal,
  },
  data() {
    return {
      value:'',
      showModal:false,
      source:'',
      required:false

    }
  },
  methods: {
    open(value){
      this.source = value
      this.showModal = true
      this.value = ''
    },
    handleModalCancel(){
      uni.$u.toast('取消');
      this.$emit('handleModalCancel')
      this.showModal = false
    },
    handleModalConfirm(){
      if (this.modalTitle === '确认拒绝意见' && !this.value.trim()) {
        this.required = true
        uni.$u.toast('请输入拒绝的具体原因');
        return;
      }
      this.$emit('handleModalConfirm',{
        value:this.value,
        source:this.source
      })
      this.showModal = false
    },
    upTextValue(){
      if(this.value.trim()){
        this.required = false
      }

    }
  },
}
</script>

<style>
/* 通用样式 */
.modelTui .tui-modal-show,
.modelTui .tui-modal-normal,
.modelTui .tui-modal-box {
  background-color: #ffffff;
  z-index: 9998;
}

/* H5专用 */
/* #ifdef H5 */
.modelTui :deep(.tui-modal-show),
.modelTui :deep(.tui-modal-normal),
.modelTui :deep(.tui-modal-box) {
  width: 75% !important;
  padding: 20rpx !important;
  border-radius: 12rpx !important;
}
/* #endif */

/* App专用 */
/* #ifdef APP-PLUS */
.modelTui :deep(.tui-modal-show),
.modelTui :deep(.tui-modal-normal),
.modelTui :deep(.tui-modal-box) {
  width: 75% !important;
  padding: 10px !important;
  border-radius: 12rpx !important;
}
/* #endif */


</style>

<style scoped lang="scss">
// 自定义模态框样式
$primary-color: rgb(41, 121, 255);
$secondary-color: #f8f9fa;
$text-color: #2b2d42;
$light-gray: #e9ecef;
$border-radius: 12px;

.elegant-modal {
  margin:  0 auto;
  width: 100%;
  background: #fff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  animation: scaleIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  // 标题区域
  .modal-header {
    padding: 22rpx 24rpx 24rpx;
    text-align: center;
    position: relative;

    .header-title {
      margin-bottom: 10rpx;
      font-size: 18px;
      font-weight: 500;
      color: $text-color;
      letter-spacing: 0.2px;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 24px;
      right: 24px;
      height: 1px;
      background: linear-gradient(to right, transparent, $light-gray, transparent);
    }
  }

  // 内容区域
  .modal-body {
    .elegant-textarea {
      margin: 0 auto;
      width: 94%;
      min-height: 160rpx;
      font-size: 15px;
      color: $text-color;
      line-height: 1.5;
      background: $secondary-color;
      transition: all 0.3s ease;
      resize: none;
      border: none !important;

      &:focus {
        background: #fff;
        box-shadow: 0 0 0 2px rgba($primary-color, 0.15);
      }

      &::placeholder {
        color: #adb5bd;
        font-weight: 300;
      }
    }
  }

  // 底部按钮
  .modal-footer {
    display: flex;
    height: 80rpx;
    border-top: 1px solid rgba($light-gray, 0.6);

    .footer-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;

      text {
        font-size: 16px;
        font-weight: 500;
        position: relative;
        z-index: 1;
      }

      &.cancel {
        color: #6c757d;

        &:active {
          background: rgba($light-gray, 0.4);
        }
      }

      &.confirm {
        color: $primary-color;
        font-weight: 600;

        &:active {
          background: rgba($primary-color, 0.1);
        }
      }
    }

    .footer-divider {
      width: 1px;
      background: rgba($light-gray, 0.6);
    }
  }

}


</style>
